.filter-container {
  position: relative;
  padding-bottom: 10px;

  .filter-item {
    display: inline-block;
    min-width: 65px;
    padding: 10px;
    margin-bottom: 10px;
    vertical-align: middle;
    background: #f56c6c;
    border: none;
  }

  .reset-item {
    display: inline-block;
    min-width: 65px;
    padding: 10px;
    margin-bottom: 10px;
    margin-left: 10px;
    color: #333;
    vertical-align: middle;
    background: none;
    border: 1px solid #ddd;
  }

  .dropdown-item {
    display: inline-block;
    min-width: 65px;
    margin-bottom: 10px;
    vertical-align: middle;
  }

  &::before {
    position: relative;
    display: block;
    width: 10px;
    height: 46px;
    content: '';
  }

  .filter-content {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    display: flex;
    background: #fff;

    &.border-bottom {
      border-bottom: 1px solid #eee;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
    }

    div {
      flex: 1 1;

      &.searchif {
        position: relative;
        padding-right: 20px;
        overflow: hidden;

        .moreico {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 1;
        }

        &.height {
          height: 46px;
        }

        .search-item {
          display: inline-block;
          display: flex;
          padding-left: 10px;
          font-size: 14px;
          color: #333;
          justify-content: center;

          label {
            display: inline-block;
            /* margin-bottom: 10px;*/
            font-weight: normal;
            line-height: 32px;
            text-align: right;
            vertical-align: middle;
          }

          .el-input__inner {
            height: 32px;
            line-height: 32px;
          }

          .el-date-editor {
            margin-top: 5px;

            i {
              line-height: 28px !important;
            }
          }

          & > span {
            flex: 1;
          }
        }
      }

      &.btngroup {
        text-align: right;
        flex: 0 0 260px;
        align-content: flex-end;

        .redBtn {
          background: #d12f1f;
        }

        .redBtn:hover {
          background: #e34f2f;
        }
      }
    }
  }
}
